<!DOCTYPE html>
<html lang="en" class="no-js">
  <script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="generator" content="Hugo 0.55.6" />

  <meta name="ROBOTS" content="INDEX, FOLLOW" />

  <link rel="alternate" type="application/rss&#43;xml" href="/index.xml" />

  <link rel="shortcut icon" href="/assets/favicons/favicon.ico" />
  <link rel="apple-touch-icon" href="/assets/favicons/apple-touch-icon.png" sizes="180x180" />
  <link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16" />
  <link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-144x144.png" sizes="36x36" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-144x144.png" sizes="48x48" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-144x144.png" sizes="72x72" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-144x144.png" sizes="96x96" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-144x144.png" sizes="144x144" />
  <link rel="icon" type="image/png" href="/assets/favicons/android-192x192.png" sizes="192x192" />

  <title>Relationships | Meshery</title>
  <meta property="og:title" content="Relationships" />
  <meta property="og:description"
    content="Meshery Relationships identify and facilitate genealogy between Components." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="http://localhost:4000" />
  <meta property="og:site_name" content="http://localhost:4000" />
  <meta property="og:image"
    content="https://raw.githubusercontent.com/meshery/meshery/master/docs/assets/img/meshery-cncf-twitter.png" />

  <meta itemprop="name" content="Relationships" />
  <meta itemprop="description"
    content="Meshery Relationships identify and facilitate genealogy between Components." />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Relationships" />
  <meta name="twitter:description"
    content="Meshery Relationships identify and facilitate genealogy between Components." />
  <meta name="twitter:image"
    content="https://raw.githubusercontent.com/meshery/meshery/master/docs/assets/img/meshery-cncf-twitter.png" />
  
    <!-- <link rel="stylesheet" href="/assets/css/palette.css" /> -->
  <!-- <link rel="stylesheet" href="/assets/css/anchorjs.css" /> -->
  <link rel="stylesheet" href="/assets/css/sass.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />

  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-PCGTC98C');</script>

  <!-- End Google Tag Manager -->
  
  
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"
    integrity="sha512-qzgd5cYSZcosqpzpn7zF2ZId8f/8CHmFKZ8j7mU4OUXTNRd5g+ZHBPsgKEwoqxCtdQvExE5LprwwPAgoicguNg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>



  <!-- Anchorjs included for adding hover anchor links to headings -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.2/anchor.min.js"></script>
  <script>
    $(function () {
      /** AnchorJS options and selector */
      anchors.options = {
        visible: "hover",
        placement: "right",
      };
      anchors.add("h1, h2, h3, h4, h5");
    });
    // Function to handle anchor links
    document.addEventListener('click', function (event) {
      if (event.target.tagName === 'A' && event.target.getAttribute('href').startsWith('#')) {
        window.location.hash = event.target.getAttribute('href');
      }
    });
  </script>
</head>
 <header>
  <nav class="js-navbar-scroll navbar">
    <a class="navbar-brand" href="/">
      <div class="navbar-logo">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1703.46 182.75"><defs><style>.cls-1{fill:#00d3a9;}.cls-2{fill:#00b39f;}.cls-3{fill:#3c494f;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M96,43.12V86.7l38.52-21.91Z"/><path class="cls-1" d="M96,95.82v43.92l38.87-21.9Z"/><path class="cls-2" d="M90.43,86.47v-43L52.38,64.91Z"/><path class="cls-2" d="M14,139.51a93,93,0,0,0,29.56,29.21v-46Z"/><path class="cls-2" d="M90.42,139.51V96.17L52.25,117.84Z"/><path class="cls-1" d="M49.08,166,87.72,144.3,49.08,122.4Z"/><path class="cls-2" d="M137.57,166.21V122.63L98.94,144.31Z"/><path class="cls-2" d="M175.4,134.5a89.15,89.15,0,0,0,10.94-39.13L146.07,118Z"/><path class="cls-1" d="M143.13,113.28,182,91.49,143.13,69.7Z"/><path class="cls-2" d="M137.56,60.23V17L99.15,38.56Z"/><path class="cls-2" d="M137.55,113.05V69.47L99,91.26Z"/><path class="cls-1" d="M49.08,69.36v44L88,91.26Z"/><path class="cls-2" d="M90.43,0a93.2,93.2,0,0,0-41,10.61l41,23Z"/><path class="cls-1" d="M49.08,16.65V60.46L88,38.56Z"/><path class="cls-2" d="M43.55,14A91.83,91.83,0,0,0,14,43.23L43.55,60V14Z"/><path class="cls-1" d="M137.32,10.84A94.71,94.71,0,0,0,96,0V34Z"/><path class="cls-1" d="M0,94.57a89.28,89.28,0,0,0,11.17,40.27l29.91-17Z"/><path class="cls-1" d="M11.17,47.91A90.17,90.17,0,0,0,0,88.06L41.08,64.91l-30-17Z"/><path class="cls-2" d="M49.47,172a93.47,93.47,0,0,0,41,10.61V149l-41,22.93Z"/><path class="cls-1" d="M172.46,43.35a93,93,0,0,0-29.33-29.09V60Z"/><path class="cls-1" d="M143.13,168.6a91.72,91.72,0,0,0,29.45-29.31l-29.45-16.66v46Z"/><path class="cls-2" d="M186.42,87.72A89.58,89.58,0,0,0,175.36,48L145.68,64.79Z"/><path class="cls-1" d="M96,182.75a93.24,93.24,0,0,0,41-10.61L96,148.87Z"/><path class="cls-2" d="M43.55,112.94V69.81L5.38,91.26Z"/><path class="cls-3" d="M784.8,56.17v92H889.85v-22h-83V104.6h63.94v-22H806.81V61.05h83v-22H784.8Z"/><path class="cls-3" d="M379.53,56.17v92H485v-22H402V104.6H465.9v-22H402V61.05H485v-22H379.53Z"/><path class="cls-3" d="M630.74,119.66a23.83,23.83,0,0,1-2.49,11,28.89,28.89,0,0,1-6.22,9,35.86,35.86,0,0,1-9.14,6.1,27.83,27.83,0,0,1-11.21,2.44H497.87V125.36H601.68a5.38,5.38,0,0,0,4.15-1.63,5.15,5.15,0,0,0,1.66-4.07v-9a5.15,5.15,0,0,0-1.66-4.07,5.38,5.38,0,0,0-4.15-1.63H526.94a25.15,25.15,0,0,1-11.22-2.44,29.55,29.55,0,0,1-9.13-6.11,34.86,34.86,0,0,1-6.23-8.95,23.86,23.86,0,0,1-2.49-11v-9a23.79,23.79,0,0,1,2.49-11,34.74,34.74,0,0,1,6.23-9,35.37,35.37,0,0,1,9.13-6.1,25.15,25.15,0,0,1,11.22-2.45h103.8v23.2H526.94a5.42,5.42,0,0,0-4.16,1.63A5.19,5.19,0,0,0,521.12,68v9A5.2,5.2,0,0,0,522.78,81a5.41,5.41,0,0,0,4.16,1.62h74.74a25.11,25.11,0,0,1,11.21,2.45,35.6,35.6,0,0,1,9.14,6.1,34.71,34.71,0,0,1,6.22,9,26.4,26.4,0,0,1,2.49,11Z"/><path class="cls-3" d="M770.68,148.15H749.51V105.42H666.87v42.73H645.7V82.22H749.51V39.07h21.17ZM666.87,72H645.7V39.48h21.17Z"/><path class="cls-3" d="M1073,77.33l-27.83-38.26h-27.82l44.43,65.53v43.55h22.43V104.6l44.43-65.53h-27.41Z"/><path class="cls-3" d="M927.64,59.83h56.89V83H938.85v20.76h10.38l40.28,44.77h27.41l-40.28-44.77h15.78a17.37,17.37,0,0,0,17.44-17.1V56.17a17.38,17.38,0,0,0-17.44-17.1H906.05V147.75h22Z"/><path class="cls-3" d="M360.43,57.39c-4.57-10.58-15.78-18.32-27.82-17.91H223.81V148.56h23.67V62.27c32.39,0,86.37-.4,87.62.41,8.3-2.44,2.49,82.22,4.15,85.07h23.67C361.67,140.42,365,62.27,360.43,57.39Z"/><path class="cls-3" d="M305.2,74.48H281.53v73.67H305.2Z"/><rect class="cls-3" x="1235.62" y="1.38" width="5" height="180"/><path class="cls-3" d="M1408,39.61c28.88,0,49.39,23.49,49.39,52.38s-20.51,52.38-49.39,52.38h-40.42a2.68,2.68,0,0,1-3-3V42.6a2.68,2.68,0,0,1,3-3H1408Zm0,94.89c23.34,0,39.21-19,39.21-42.51S1431.34,49.48,1408,49.48h-32.93v85Zm101.7,11.67A39.22,39.22,0,1,1,1549.07,107,38.9,38.9,0,0,1,1509.7,146.17Zm0-9.58A29.64,29.64,0,1,0,1480.22,107,29.2,29.2,0,0,0,1509.7,136.59ZM1633,120.43c2.09,0,3.29,1.34,2.39,3.44-5.24,13.32-18.86,22.3-34.72,22.3-22.6,0-39.37-17.06-39.37-39.21s16.77-39.22,39.37-39.22c15.86,0,29.33,9,34.72,22.3.9,2.1-.3,3.45-2.39,3.45h-4.35a3.76,3.76,0,0,1-3.59-2.25c-4.49-8.53-13.62-13.92-24.39-13.92a29.64,29.64,0,0,0,0,59.27c10.92,0,20-5.54,24.39-13.92a3.76,3.76,0,0,1,3.59-2.24Zm26.44-31.28c0,19,44,7.63,44,35.62,0,12.27-11.07,21.4-27.69,21.4-15.41,0-26-7.78-27.54-20.35-.15-2.1,1-3.15,3-3.15h3.89c1.79,0,2.69,1,3.14,2.85,1.35,8.23,9,11.07,17.51,11.07,9.43,0,17.81-3.44,17.81-11.82,0-19-44-7.64-44-35.62,0-12.28,11.08-21.41,26.19-21.41,14.07,0,24.55,7.79,26,20.36.15,2.09-1,3.14-3,3.14h-3.89c-1.8,0-2.69-1-3.14-2.84-1.35-8.23-8.83-11.08-16-11.08C1667.84,77.32,1659.46,80.77,1659.46,89.15Z"/></g></g></svg>
      </div>
      <div class="mobile">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.08 80.17"><defs><style>.cls-1{fill:#00d3a9;}.cls-2{fill:#00b39f;}.cls-3 {fill:var(--meshery-logo-text-fill);}</style></defs><polygon class="cls-1" points="41.26 18.9 41.26 38.04 57.86 28.43 41.26 18.9"/><polygon class="cls-1" points="41.26 42.05 41.26 61.29 58.01 51.71 41.26 42.05"/><polygon class="cls-2" points="38.87 37.91 38.87 19.06 22.48 28.45 38.87 37.91"/><path class="cls-2" d="M6,61.22A40.35,40.35,0,0,0,18.71,74V53.86Z"/><polygon class="cls-2" points="38.87 61.2 38.87 42.19 22.44 51.7 38.87 61.2"/><polygon class="cls-1" points="21.1 72.81 37.74 63.3 21.1 53.68 21.1 72.81"/><polygon class="cls-2" points="59.15 72.92 59.15 53.81 42.53 63.31 59.15 72.92"/><path class="cls-2" d="M75.42,59a39.88,39.88,0,0,0,4.71-17.18l-17.32,9.9Z"/><polygon class="cls-1" points="61.54 49.7 78.23 40.15 61.54 30.55 61.54 49.7"/><polygon class="cls-2" points="59.15 26.42 59.15 7.43 42.61 16.91 59.15 26.42"/><polygon class="cls-2" points="59.15 49.61 59.15 30.45 42.57 40.05 59.15 49.61"/><polygon class="cls-2" points="40.07 80.17 40.07 80.17 40.07 80.17 40.07 80.17"/><polygon class="cls-1" points="21.1 30.41 21.1 49.72 37.8 40.05 21.1 30.41"/><path class="cls-2" d="M38.87,0A40,40,0,0,0,21.28,4.65L38.87,14.77Z"/><polygon class="cls-1" points="21.1 7.31 21.1 26.49 37.81 16.91 21.1 7.31"/><path class="cls-2" d="M18.71,6.14A40.28,40.28,0,0,0,6,18.94l12.72,7.34Z"/><path class="cls-1" d="M59,4.74A40,40,0,0,0,41.26,0V14.93Z"/><path class="cls-1" d="M0,41.48A40,40,0,0,0,4.79,59.16L17.67,51.7Z"/><path class="cls-1" d="M4.79,21A40,40,0,0,0,0,38.58L17.69,28.45Z"/><path class="cls-2" d="M21.24,75.49a39.88,39.88,0,0,0,17.63,4.66V65.41Z"/><path class="cls-1" d="M74.17,19A40.24,40.24,0,0,0,61.54,6.21v20.1Z"/><path class="cls-1" d="M61.54,74A40.34,40.34,0,0,0,74.23,61.07L61.54,53.75Z"/><path class="cls-2" d="M80.13,38.48a39.88,39.88,0,0,0-4.76-17.42L62.64,28.43Z"/><path class="cls-1" d="M41.26,80.15a39.79,39.79,0,0,0,17.59-4.64L41.26,65.34Z"/><polygon class="cls-2" points="18.71 49.54 18.71 30.61 2.27 40.04 18.71 49.54"/><polygon class="cls-3" points="269.94 29.39 269.94 30.89 269.94 37.93 269.94 46.53 269.94 59.08 303.36 59.08 303.36 52.03 276.99 52.03 276.99 46.53 276.99 44.98 297.25 44.98 297.25 37.93 276.99 37.93 276.99 30.89 303.36 30.89 303.36 23.84 269.94 23.84 269.94 29.39"/><polygon class="cls-3" points="141.41 29.39 141.41 30.89 141.41 37.93 141.41 46.53 141.41 59.08 174.83 59.08 174.83 52.03 148.46 52.03 148.46 46.53 148.46 44.98 168.72 44.98 168.72 37.93 148.46 37.93 148.46 30.89 174.83 30.89 174.83 23.84 141.41 23.84 141.41 29.39"/><path class="cls-3" d="M221.08,49.87a8.74,8.74,0,0,1-.73,3.57,9,9,0,0,1-2,2.94,9.5,9.5,0,0,1-2.93,2,9,9,0,0,1-3.6.73h-33V51.66h33a1.78,1.78,0,0,0,1.79-1.79V47a1.76,1.76,0,0,0-.52-1.27,1.73,1.73,0,0,0-1.27-.51H188.09a8.74,8.74,0,0,1-3.57-.73,9.4,9.4,0,0,1-5-5,8.9,8.9,0,0,1-.73-3.57V33.09a9.11,9.11,0,0,1,.73-3.59,9.58,9.58,0,0,1,2-2.94,9.32,9.32,0,0,1,3-2,8.9,8.9,0,0,1,3.57-.72h33v7.47h-33a1.78,1.78,0,0,0-1.79,1.78V36a1.78,1.78,0,0,0,1.79,1.79h23.73a9.11,9.11,0,0,1,3.6.72,9.59,9.59,0,0,1,2.93,2,9.41,9.41,0,0,1,2,2.94,8.9,8.9,0,0,1,.73,3.59Z"/><path class="cls-3" d="M265.54,59.08h-6.73V45.22H232.6V59.08h-6.72V37.75h32.93V23.84h6.73ZM232.6,34.44h-6.72V23.84h6.72Z"/><polygon class="cls-3" points="361.45 36.17 352.64 23.84 343.83 23.84 357.93 44.98 357.93 59.08 364.98 59.08 364.98 44.98 379.08 23.84 370.38 23.84 361.45 36.17"/><path class="cls-3" d="M315.35,30.56h18.07v7.33H318.86v6.72h3.34L335,59.08h8.7L330.9,44.61h5a5.48,5.48,0,0,0,5.48-5.48V29.31a5.47,5.47,0,0,0-5.48-5.47H308.44V59.08h7.05Z"/><path class="cls-3" d="M136,59.08h-7.47V33.38a1.94,1.94,0,0,0-.16-.8,2.15,2.15,0,0,0-1.11-1.11,1.94,1.94,0,0,0-.8-.16H91.91V23.84h34.54a9.22,9.22,0,0,1,3.69.75,9.38,9.38,0,0,1,5.1,5.1,9.22,9.22,0,0,1,.75,3.69Zm-36.6,0H91.91V31.31l7.48-2Zm18.28,0h-7.48V35.22h7.48Z"/></svg>
      </div>
    </a>

    <div id="main_navbar">
      <ul class="navbar-nav">
        <!-- 
			<li class="nav-item">
        <a class="nav-link" href="https://github.com/meshery/meshery" target="_blank"><span>GitHub</span></a>
      </li>  -->

        <!-- Internal links -->
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="/installation/quick-start"
            ><span>Quick Start</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://meshery.io"
            ><span>Website</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="http://discuss.meshery.io/"
            ><span>Discuss</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://meshery.io/catalog"
            ><span>Catalog</span></a
          >
        </li>
        
        <li class="nav-item">
          <a
            class="nav-link"
            href="https://meshery.io/blog"
            ><span>Blog</span></a
          >
        </li>
        
        
        <a href="https://play.meshery.io">
          <div class="nav-btn">Playground</div>
        </a>
        <!--Version Selector -->
        <select
          onchange="window.location=this.value"
          class="appearance-none flex-1 w-full px-0 py-1 placeholder-gray-900 tracking-wide focus:outline-none version-selector"
          name="versioningSelection"
          id="versioningSelection"
        >
          <!-- <option value="">Versions</option> -->
           <!-- we get the version selected, and put it to the right option  --><option
            
            value="/"
            class="nav-item mr-4 mb-2 mb-lg-0 text-black"
          >
            <span>latest</span>
          </option>
          <!-- we get the version selected, and put it to the right option  --><option
            
            value="/v0.6"
            class="nav-item mr-4 mb-2 mb-lg-0 text-black"
          >
            <span>v0.6</span>
          </option>
          <!-- we get the version selected, and put it to the right option  --><option
            
            value="/v0.5"
            class="nav-item mr-4 mb-2 mb-lg-0 text-black"
          >
            <span>v0.5</span>
          </option>
          <!-- we get the version selected, and put it to the right option  --><option
            
            value="/v0.4"
            class="nav-item mr-4 mb-2 mb-lg-0 text-black"
          >
            <span>v0.4</span>
          </option>
          
        </select>
      </ul>
    </div>

    <div class="icon-container">
      <button class="nav-toggle-btn nav-toggle-btn--main">
        <svg
          id="menu-nav-toggle-btn"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-menu"
        >
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </button>
      <button class="nav-mode-icon" id="mode-toggle-btn" style="text-align: center">
        <img class="nav-text" id="logo-dark-light" src="/assets/img/nav-icons/mode-toggle-icon-moon.png" 
        data-logo-for-dark="/assets/img/nav-icons/mode-toggle-icon-moon.png"
        data-logo-for-light="/assets/img/nav-icons/mode-toggle-icon-sun.png"
        />
      </button>
    </div>

    <!--Search Bar
    <div class="navbar-nav d-none d-lg-block"><input type="search" class="form-control td-search-input" placeholder="&#xf002 Search this site…" aria-label="Search this site…" autocomplete="off"></div>-->

    <!-- meshery-custom-begin
	<div class="navbar-nav d-none d-lg-block">
          <a class="gh-source" data-gh-source="github" href="https://github.com/meshery/meshery" title="Go to repository" data-md-state="done">
          <div class="gh-source__repository">
            <i class="fab fa fa-github fa-2x" style='padding-right:20px; float:left; margin-top:5px'></i>
            meshery/meshery
          <ul class="gh-source__facts"><li class="gh-source__fact" id='stars'></li><li id="forks" class="gh-source__fact"></li></ul></div></a>
        </div>
      </div>
meshery-custom-end -->
  </nav>
</header>

<!-- meshery-custom-begin
<script>
$(document).ready(function() {
  var url = "https://api.github.com/search/repositories?q=meshery/meshery";
  fetch(url, { 
      headers: {"Accept":"application/vnd.github.preview"}
  }).then(function(e) {
    return e.json()
  }).then(function(r) {
     console.log(r.items[0])
     stars = r.items[0]['stargazers_count']
     forks = r.items[0]['forks_count']
     $('#stars').text(stars + " Stars")
     $('#forks').text(forks + " Forks")
  });
});
</script>
meshery-custom-end -->


  <body class="td-section dark-mode">
    <script>
      if(localStorage.getItem("mode") == "light-mode")  {
      document.body.classList.remove("dark-mode");
      const allLogos = document.querySelectorAll("#logo-dark-light");
      allLogos.forEach(e => e.src = e.dataset.logoForLight);
  }
    </script>
    <!-- Google Tag Manager -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PCGTC98C"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager -->

    <div class="flex-container">
      <div class="left-container">
        <div class="sidebar-container-wrapper">
          <div class="sidebar-container"><div class="sidebar-menu">
  <form class="sidebar__search-form">
    <input
      type="search"
      class="sidebar__search-input"
      id="sidebar-search-input"
      placeholder="Search this site..."
      aria-label="Search this site..."
      autocomplete="off"
    />
  </form>
  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> -->
  <script type="text/javascript">
    // <!--Ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView-->
    // <!--Ref: https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move-->
    (() => {
      window.addEventListener("load", function () {
        let scrollElem = document.getElementsByClassName("sidebar-nav__section-link active").item(0);
        if (scrollElem) {
         scrollElem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
        }
        let activeSections = document.querySelectorAll(".sidebar-nav__section-link.active");
      activeSections.forEach(function (activeSection) {
        let parentCollapse = activeSection.closest(".collapse");
        if (parentCollapse) {
          parentCollapse.classList.add("show");
        }
      });
    });
  })();
  </script>

  <nav class="sidebar-nav" id="td-section-nav">
    
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section0" aria-expanded="false" aria-controls="section0"> ⇅ </div>
        <a
          href="/project/overview"  class="toggle"  data-toggle="collapse" data-target="#section0" aria-expanded="false" aria-controls="section0"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 🗺 Overview & Installation
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section0">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/faq"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >FAQs</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/installation/quick-start"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >🚀 Quick Start</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/installation"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Installation ↆ</a
              >
            </li>
              <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section1" aria-expanded="false" aria-controls="section1"> ⇅ </div>
        <a
          href="/concepts"  class="toggle"  data-toggle="collapse" data-target="#section1" aria-expanded="false" aria-controls="section1"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 🧠 Concepts
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section1">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/concepts/architecture"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Architectural ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/concepts/logical"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Logical ↆ</a
              >
            </li>
             
             <ul style="margin-bottom: 0;">

                     
                  <li id="designs">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-concepts-logical-ↆ-designs"
                    href="/concepts/logical/designs"
                    >Designs</a>
                  </li>
                   <!-- end grandchild -->
                   
                  <li id="environments">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-concepts-logical-ↆ-environments"
                    href="/concepts/logical/environments"
                    >Environments</a>
                  </li>
                   <!-- end grandchild -->
                   
                  <li id="models-ↆ">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-concepts-logical-ↆ-models-ↆ"
                    href="/concepts/logical/models"
                    >Models ↆ</a>
                  </li>
                  
                  <ul style="margin-bottom: 0;">
                         
                      <li id="components">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-concepts-logical-ↆ-components"
                        href="/concepts/logical/components"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">Components</strong></a
                      >
                      </li>
                         
                      <li id="relationships">
                        <a
                        class="sidebar-nav__section-link  active "
                        id="m-concepts-logical-ↆ-relationships"
                        href="/concepts/logical/relationships"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">Relationships</strong></a
                      >
                      </li>
                         
                      <li id="policies">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-concepts-logical-ↆ-policies"
                        href="/concepts/logical/policies"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">Policies</strong></a
                      >
                      </li>
                         
                      <li id="connections">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-concepts-logical-ↆ-connections"
                        href="/concepts/logical/connections"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">Connections</strong></a
                      >
                      </li>
                         
                      <li id="credentials">
                        <a
                        class="sidebar-nav__section-link "
                        id="m-concepts-logical-ↆ-credentials"
                        href="/concepts/logical/credentials"
                        ><strong style="color: var(--color-secondary-medium); font-weight: normal;">Credentials</strong></a
                      >
                      </li>
                       <!-- grandchild -->
                  </ul>
                  
                   <!-- end grandchild -->
                   
                  <li id="registry">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-concepts-logical-ↆ-registry"
                    href="/concepts/logical/registry"
                    >Registry</a>
                  </li>
                   <!-- end grandchild -->
                   
                  <li id="workspaces">
                  <a
                    class="sidebar-nav__section-link "
                    id="m-concepts-logical-ↆ-workspaces"
                    href="/concepts/logical/workspaces"
                    >Workspaces</a>
                  </li>
                   <!-- end grandchild -->
                 <!-- children -->
              </ul> 
                <!-- end children -->
                <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section2" aria-expanded="false" aria-controls="section2"> ⇅ </div>
        <a
          href="/guides"  class="toggle"  data-toggle="collapse" data-target="#section2" aria-expanded="false" aria-controls="section2"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 📚 Guides & Tutorials
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section2">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/infrastructure-management/overview"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >⚙️ Infrastructure Management ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/configuration-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Configuring Kubernetes Infrastructure ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/events-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Managing Events with Notification Center</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/infrastructure-management/gitops-with-meshery"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >GitOps with Meshery</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/performance-management"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Performance Management ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/mesheryctl"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Using Meshery CLI Guides ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/troubleshooting"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Troubleshooting Guides ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/guides/tutorials"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >🧑‍🔬 Tutorials ↆ</a
              >
            </li>
              <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section3" aria-expanded="false" aria-controls="section3"> ⇅ </div>
        <a
          href="/extensibility"  class="toggle"  data-toggle="collapse" data-target="#section3" aria-expanded="false" aria-controls="section3"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 🛠 Integrations & Extensions
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section3">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/api"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >APIs</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/adapters"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Adapters ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/integrations"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Integrations</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/load-generators"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Load Generators</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/providers"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Providers</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/ui"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >UI Plugins</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensions"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >🦾 Extensions ↆ</a
              >
            </li>
              <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section4" aria-expanded="false" aria-controls="section4"> ⇅ </div>
        <a
          href="/project"  class="toggle"  data-toggle="collapse" data-target="#section4" aria-expanded="false" aria-controls="section4"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 🧑‍💻 Contributing & Community
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section4">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/community"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Community</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/contributing"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Contributing ↆ</a
              >
            </li>
              <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
    <ul class="sidebar-nav__section">
       

      <li class="sidebar-nav__section-title">
        <!-- Toggle button -->
        <div class="toggle"  data-toggle="collapse" data-target="#section5" aria-expanded="false" aria-controls="section5"> ⇅ </div>
        <a
          href="/reference"  class="toggle"  data-toggle="collapse" data-target="#section5" aria-expanded="false" aria-controls="section5"
          class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section "
          > 📖 Reference
        </a>
  
      
          <ul class="td-sidebar-nav__section collapse" id="section5">
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/reference/error-codes"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Error Code Reference</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/reference/permissions"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Permissions Keys Reference</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/extensibility/api"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >REST & GraphQL APIs ↆ</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/reference/mesheryctl"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >CLI Command Reference</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/reference/meshery-operator-crds"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Meshery Operator CRDs</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/releases"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Releases</a
              >
            </li>
              <!-- end pageurl -->
             
            <li class="sidebar-nav__section-link ">
              <a
                href="/project/security-vulnerabilities"
                class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section"
                >Vulnerabilities</a
              >
            </li>
              <!-- end pageurl -->
             <!--  section.links -->
          </ul>
       <!--  section.links -->
    </li>
  </ul> <!-- end of "sidebar-nav__section" -->
  
</nav>
</div>
</div>
        </div>

        <div class="icon-container">
          <button class="nav-toggle-btn nav-toggle-btn--document">
            <?xml version="1.0" encoding="utf-8"?>
              <svg version="1.1" id="document-nav-toggle-btn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" viewBox="0 0 10.7 18.7" style="enable-background:new 0 0 10.7 18.7;" xml:space="preserve">
              <style type="text/css">
                .st0{stroke:#000000;stroke-width:1.5;stroke-miterlimit:10;}
              </style>
              <path class="st0" d="M8.1,9.4L1,1.9C0.7,1.7,0.7,1.2,1,1c0.3-0.3,0.7-0.3,1,0c0,0,0,0,0,0l7.8,7.9c0.3,0.3,0.3,0.7,0,1l-7.8,7.9
                c-0.3,0.3-0.7,0.3-1,0c0,0,0,0,0,0c-0.3-0.3-0.3-0.7,0-1L8.1,9.4z"/>
              </svg>
          </button>
        </div>
      </div>
      <main class="main-container" role="main">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb spb-1">
            <li class="breadcrumb-item active" aria-current="page"><div id="breadcrumbs">


   <a href="/">home</a>


  
    / <a href="/concepts">concepts</a> 
  

  
    / <a href="/concepts/logical">logical</a> 
  

  
    / relationships
  

</div>

<!-- <a href="http://idratherbewriting.com" class="noCrossRef productSubtitle"> Home </a> > <a class="noCrossRef productSubtitle" href="http://localhost:4000">Learn API Doc</a> > relationships -->
</li>
          </ol>
        </nav>
        <div class="td-content">
          
          <h1>Relationships</h1>
           <p>Meshery Relationships characterize how <a href="./components">components</a> are connected and interact with each other. Relationships are defined within <a href="./models">models</a> to aid in structuring the interrelationships between one or more components in a <a href="./design">design</a> to further in comprehending the overall structure and dependencies within managed systems.</p>

<p>Meshery recognizes that relationships exist in various forms and that the existence of a relationship might be interdependent upon the existence (or absence) of another relationship. To support this complexity, Meshery relationships are highly expressive, characterizing the nature of interaction of interconnected components no matter their genealogy.</p>

<p><strong>Benefits of Using Meshery Relationships</strong></p>

<ul>
  <li><strong>Improved Visibility:</strong> Relationships provide a clear visual representation of the connections between components, making it easier to understand the system’s architecture.</li>
  <li><strong>Enhanced Design:</strong> Relationships help you make informed decisions about component selection and placement, leading to better design choices.</li>
  <li><strong>Automated Configuration:</strong> Relationship-driven actions can automate the configuration of components, reducing manual effort and potential errors.</li>
  <li><strong>Increased Flexibility:</strong> The use of selectors, actions, and operators provides flexibility in defining and managing relationships.</li>
</ul>

<div class="alert alert-dark">
<h4 class="alert-heading">Contributor Guide to Meshery Relationships</h4>
If you want to create a new relationship definition or modify existing relationship definitions, see the <a href="https://docs.meshery.io/project/contributing/contributing-relationships">Contributing to Meshery Relationships</a> guide.
</div>

<h2 id="types-of-relationships">Types of Relationships</h2>

<p>Meshery supports different types of relationships to cater to various use cases:</p>

<ul>
  <li><strong>Hierarchical Relationships:</strong> These represent parent-child relationships between components, where one component is a dependency of another. arent-child relationships show clear lineage, similar to a family tree (child, parent, grandparent, etc.).</li>
  <li><strong>Sibling Relationships:</strong> These represent relationships between components that are not directly dependent on each other but may still interact or influence each other’s behavior; they describe components that share a common origin but operate independently (siblings, cousins, etc.).</li>
  <li><strong>Edge Relationships:</strong> These represent relationships that are visually depicted as edges connecting components in MeshMap. Edge relationships are used to define how components interact with each other, such as network connections, bindings, or permissions. They are also used to identify interdependencies between components.</li>
  <li><strong>TagSets Relationships:</strong> These represent relationships between components of same Labels or Annotations key/value pairs. Labels and Annotations are two different types of Tags. Labels are often used to identify components and are visible on the design canvas. Annotations are often used to provide additional information about components.</li>
</ul>

<p>Relationships are are categorized into different kinds, types, and subtypes, so that can be expressive of the specific manner in which one or more components relate to one another. Each type of relationship can be interpretted by Meshery UI (or other <a href="/extensibility/extensions">extensions</a>) and mapped to a specific visual paradigm for the given kind relationship. Let’s look at some examples of these visual paradigms; let’s explore examples of way in which relationships are represented in Meshery.</p>

<!-- Broadly, here is a list of the different types of relationships that Meshery supports:

1. Edge
   1. Network
      1. Firewall
      2. Load Balancer
      3. Ingress
   2. Binding
      1. Mount
      2. Permission
2. Heirarchical
   1. Inventory
   2. Parent 
3. TagSets -->

<style>
    figcaption {
        margin: 1rem auto;
    }
</style>

<details open="">
    <summary>Example Visual Representations</summary>
    <details close=""><summary>Kind: Hierarchical</summary>
        <figure>
            <figcaption>subType: Parent | Namespace (Parent) and ConfigMap (child), Role (Child)<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=6370ffcd-13a6-4a65-b426-30f1e63dc381"> (open in playground)</a></figcaption>
        </figure>
        <img alt="Hierarchical - Parent: Namespace to other components" src="/assets/img/meshmodel/relationships/hierarchical_parent_relationship.svg" />
        <br />
        <figure>
            <figcaption>subType: Inventory | Namespace and ConfigMap<a target="_blank" href="https://playground.meshery.io/extension/meshmap?design=21d40e36-8ab7-4f9f-9fed-f6a818510446"> (open in playground)</a></figcaption>
        </figure>
        <img alt="Hierarchical - Parent: Namespace to other components" src="/assets/img/meshmodel/relationships/hierarchical_inventory_relationship.svg" />
    </details>
    <!-- <details close><summary>Kind: Sibling</summary>
        <figure>
            <figcaption>Type: Match, subType: Matching Label Selectors</figcaption>
        </figure>
        <img alt=Sibling src="/assets/img/meshmodel/relationships/sibling_relationship.png"/>
    </details> -->
    <details close=""><summary>Kind: Edge</summary>
        <figure>
            <figcaption>Type: `Non-Binding`, subType: `Permission`: Cluster Role with Cluster Role Binding to Service Account<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=7dd39d30-7b14-4f9f-a66c-06ba3e5000fa"> (open in playground)</a></figcaption>
        </figure>
        <img alt="Binding" src="/assets/img/meshmodel/relationships/edge_permission_relationship_cluster_role_service_account.svg" />
        <figure>
            <figcaption>Type: `Binding`, subType: `Mount`: Pod to Persistent volume via Persistent volume claim<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=43d5fdfe-25f8-4c2c-be9d-30861bbc2a08"> (open in playground)</a> </figcaption>
        </figure>
        <img alt="Edge - Mount" src="/assets/img/meshmodel/relationships/edge_mount_relationship_pod_persistent_volume.svg" />
        <br />
        <figure>
            <figcaption>Type: `Non-Binding`, subType: `Network`: Ingress to Service<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=1f79b0c6-2efe-4ee9-b08c-e1bd07a3926b"> (open in playground)</a></figcaption>
        </figure>
        <img alt="Edge - Network" src="/assets/img/meshmodel/relationships/edge_network_ingress_to_service_relationship.svg" />
        <br />
        <figure>
            <figcaption>Type: `Non-Binding`, subType: `Network`: Service to Pod<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=90a9b4a0-a296-44b5-b1c5-7b1cb4827a77"> (open in playground)</a></figcaption>
        </figure>
        <img alt="Edge - Network: Ingress to Service" src="/assets/img/meshmodel/relationships/edge_network_service_to_pod_relationship.svg" />
        <br />
        <figure>
            <figcaption>Type: `Non-Binding`, subType: `Network`: Service to Service<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=4e368e07-5039-400e-b637-96b0241af799"> (open in playground)</a></figcaption>
        </figure>
        <img alt="Edge - Network" src="/assets/img/meshmodel/relationships/edge_network_service_to_service_relationship.svg" />
        <br />
        <figure>
            <figcaption>Type: `Non-Binding`, subType: `Network`: Service to Endpoint<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=ab35416d-7cf7-4540-8b2e-7271ffeadde2"> (open in playground)</a></figcaption>
        </figure>
        <img alt="Edge - Network" src="/assets/img/meshmodel/relationships/edge_network_service_to_endpoints_relationship.svg" />
        <br />
        <figure>
            <figcaption>Type: `Non-Binding`, subType: `Network`: Service to Deployment<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=33742281-428d-4340-b42e-6a0fd4ba1d0a"> (open in playground)</a></figcaption>
        </figure>
        <img alt="Edge - Network" src="/assets/img/meshmodel/relationships/network_edge_relationship_service_deployment.svg" />
        <br />
        <!-- <figure>
            <figcaption>Type: `Binding`, subType: `Permission`</figcaption>
        </figure>
        <img alt="Edge - Permission" src="/assets/img/meshmodel/relationships/permission_edge_relationship_role_service.png"/>
        <br>
        <figure>
            <figcaption>type: `Binding`,  subType: `Permission`: Role to Service</figcaption>
        </figure>
        <img alt="Edge - Permission" src="/assets/img/meshmodel/relationships/permission_edge_relationship_role_pod.png"/>
        <br>
        <figure>
            <figcaption>type: `Binding`, subType: `Permission`: Role to Deployment</figcaption>
        </figure>
        <img alt="Edge - Permission" src="/assets/img/meshmodel/relationships/permission_edge_relationship_role_deployment.png"/>
        <br>
        <figure>
            <figcaption>type: `Binding`, subType: `Permission`: Cluster Role to Pod</figcaption>
        </figure>
        <img alt="Edge - Permission" src="/assets/img/meshmodel/relationships/permission_edge_relationship_clusterrole_pod.png"/>
        <br>
        <figure>
            <figcaption>type: `Binding`, subType: `Permission`: Cluster Role to Service</figcaption>
        </figure>
        <img alt="Edge - Permission" src="/assets/img/meshmodel/relationships/permission_edge_relationship_clusterrole_service.png"/>
        <br>
        <figure>
            <figcaption>type: `Binding`, subType: `Permission`: Cluster Role to Deployment</figcaption>
        </figure>
        <img alt="Edge - Permission" src="/assets/img/meshmodel/relationships/permission_edge_relationship_clusterrole_deployment.png"/> -->
        <br />
        <figure>
            <figcaption><code>type:non-binding</code>, subType: `Network`: Network Policy (Pod to Pod) <a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=58fda714-eaa4-490f-b228-b8bcfe3a1e47s"> (open in playground)</a></figcaption>
        </figure>
        <img alt="Edge - Network Policy" src="/assets/img/meshmodel/relationships/edge_firewall_relationship_pod_to_pod.svg" />
        </details>
    </details>

<h2 id="the-meaning-of-relationships">The Meaning of Relationships</h2>

<p>Meshery supports a variety of relationships between components. These relationships are categorized into two types: Semantic and Non-Semantic. Relationships are categorized by whether they are meaningful in terms of how Meshery manages entities - a Semantic relationship - or are simply annotations to aid in the comprehension of you as the designer of the relationship - a Non-Semantic relationship.</p>

<h3 id="semantic-relationships">Semantic Relationships</h3>

<p>Semantic relationships are those that are meaningful in the context of the application or infrastructure. For example, a <code class="language-plaintext highlighter-rouge">Service</code> in Kubernetes is semantically related to a <code class="language-plaintext highlighter-rouge">Deployment</code> or a <code class="language-plaintext highlighter-rouge">Pod</code>. These relationships are meaningful and are managed by Meshery.</p>

<h3 id="non-semantic-relationships">Non-Semantic Relationships</h3>

<p>Non-semantic relationships are those that are meaningful to you as a user and your mental representation of your infrastructure and applications, but are not meaningful in terms of how Meshery evaluates the design or manages these relationships and their associated components. Non-sematic relationships are ignored by Meshery’s lifecycle management engine. For example, a <code class="language-plaintext highlighter-rouge">Rectangle</code> shape that encloses other components (has a parent relationship with other child components) is not semantically meaningful to the way in which Meshery manages these resources. While the <code class="language-plaintext highlighter-rouge">Rectangle</code> shape might have a parent-child relationship with any number of Meshery-managed components, such a relationship does not implicate any management that Meshery might perform; they are not managed by Meshery.</p>

<!-- @iArchitSharma, help, if you would please.

_[TODO: a visual example is needed here]_ -->

<h4 id="identifiying-non-semantic-relationships">Identifiying Non-Semantic Relationships</h4>

<p>The <code class="language-plaintext highlighter-rouge">isAnnotation</code> attribute of a Relationship or Component determines whether the given Relationship or Component represents a management concern for Meshery; whether the given Relationship or Component is sematically meaningful, and whose lifecycle is managed by Meshery.</p>

<h2 id="core-concepts-of-relationships">Core Concepts of Relationships</h2>

<ul>
  <li>Kinds</li>
  <li>Types</li>
  <li>Subtypes</li>
  <li>Selectors</li>
  <li>Selectors Sets</li>
</ul>

<h2 id="kind-type-and-subtype-of-relationships">Kind, Type, and Subtype of Relationships</h2>

<p>The combination of <code class="language-plaintext highlighter-rouge">kind</code>, <code class="language-plaintext highlighter-rouge">type</code>, and <code class="language-plaintext highlighter-rouge">subType</code> uniquely determines the visual paradigm for a given relationship; i.e., relationships with the same <code class="language-plaintext highlighter-rouge">kind</code>, <code class="language-plaintext highlighter-rouge">type</code>, and <code class="language-plaintext highlighter-rouge">subType</code> will share an identical visual representation regardless of the specific components involved in the relationship.</p>

<h3 id="1-edge---network">1. Edge - Network</h3>

<p>This Relationship type configures the networking between one or more components.</p>

<p><strong>Examples</strong>: An edge-network relationship between a Service and a Deployment or an edge-binding relationship between an Ingress and a Service.</p>

<ul>
  <li>Example 1) Service –&gt; Deployment</li>
  <li>Example 3) IngressController –&gt; Ingress –&gt; Service</li>
</ul>

<details close=""><summary>Visual Representation of Edge-Network Relationships</summary>
           <br />
           <figure><figcaption>1. Edge - Network: Ingress to Service<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=1f79b0c6-2efe-4ee9-b08c-e1bd07a3926b"> (open in playground)</a></figcaption>
           <img alt="Edge - Network" src="/assets/img/meshmodel/relationships/edge_network_ingress_to_service_relationship.svg" />
           </figure>
           <figure><figcaption>2. Edge - Network: Service to Pod<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=90a9b4a0-a296-44b5-b1c5-7b1cb4827a77"> (open in playground)</a></figcaption>
           <img alt="Edge - Network: Ingress to Service" src="/assets/img/meshmodel/relationships/edge_network_service_to_pod_relationship.svg" />
           </figure>
           <figure><figcaption>3. Edge - Network: Service to Service<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=4e368e07-5039-400e-b637-96b0241af799"> (open in playground)</a></figcaption>
           <img alt="Edge - Network" src="/assets/img/meshmodel/relationships/edge_network_service_to_service_relationship.svg" />
           </figure>
           <figure><figcaption>4. Edge - Network: Service to Endpoint<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=ab35416d-7cf7-4540-8b2e-7271ffeadde2"> (open in playground)</a></figcaption>
           <img alt="Edge - Network" src="/assets/img/meshmodel/relationships/edge_network_service_to_endpoints_relationship.svg" />
           </figure>
           <figure><figcaption>5. Edge - Network: Service to Deployment<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=33742281-428d-4340-b42e-6a0fd4ba1d0a"> (open in playground)</a></figcaption>
           <img alt="Edge - Network" src="/assets/img/meshmodel/relationships/network_edge_relationship_service_deployment.svg" />
           </figure>
   </details>

<h3 id="2-edge---mount">2. Edge - Mount</h3>

<p><strong>Example</strong>: Assignment of PersistentVolumes to Pods via PersistenVolumeClaim.</p>

<ul>
  <li>Example 1) Pod –&gt; PersistenVolumeClaim –&gt; PersistentVolume</li>
</ul>

<details close=""><summary>Visual Representation of Edge-Mount Relationship</summary>
           <br />
           <p>Edge - Mount: Pod and Persistent volume via Persistent volume claim<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=43d5fdfe-25f8-4c2c-be9d-30861bbc2a08"> (open in playground)</a> </p>
           <figure>
           <img alt="Edge - Mount" src="/assets/img/meshmodel/relationships/edge_mount_relationship_pod_persistent_volume.svg" />
           </figure>
   </details>

<h3 id="3-edge---permission">3. Edge - Permission</h3>

<p><strong>Example</strong>: The set of Service Accounts that are entitled with the one or more Roles/ClusterRoles bound via Role/ClusterRoleBinding.</p>

<ul>
  <li>Example 1) ClusterRole –&gt; CluserRoleBinding –&gt; ServiceAccount</li>
  <li>Example 2) Role –&gt; RoleBinding –&gt; ServiceAccount</li>
</ul>

<details close=""><summary>Visual Representation of Edge-Permission Relationship</summary>
           <br />
           <figure><figcaption>1. Edge - Permission: Cluster Role to Service Account <a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=27454352-6b1b-426e-830e-683b8c34b94e"> (open in playground)</a></figcaption>
           </figure>
<div id="embedded-design-a7b22d89-41bc-4379-a983-20e835341faf" style="height:30rem;width:100%;"></div>
<script src="/assets/img/meshmodel/relationships/embedded-design-edge-binding-permissions-relationship.js" type="module"></script>
</details>

<h3 id="4-edge---firewall">4. Edge - Firewall</h3>

<p>Kubernetes Network Policy for controlling ingress and egress traffic from Pod-to-Pod</p>

<ul>
  <li>Example 1) Pod –&gt; NetworkPolicy –&gt; Pod</li>
</ul>

<details close=""><summary>Visual Representation of Edge-Firewall Relationship</summary>
           <br />
           <figure><figcaption>Edge - Firewall: Pod to Pod<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=58fda714-eaa4-490f-b228-b8bcfe3a1e47s"> (open in playground)</a></figcaption>
           <img alt="Edge - Firewall" src="/assets/img/meshmodel/relationships/edge_firewall_relationship_pod_to_pod.svg" />
           </figure>
   </details>

<h3 id="5-hierarchical---parent---wallet">5. Hierarchical - Parent - Wallet</h3>

<p><strong>Example</strong></p>

<ul>
  <li>Example 1) (binary and configuration) –&gt; IstioWASMPlugin</li>
  <li>Example 2) WASMFilter (binary and configuration) –&gt; IstioEnvoyFilter</li>
</ul>

<details close=""><summary>Visual Representation of Hierarchical-Inventory Relationship</summary>
           <figure><br /><figcaption>1. Hierarchical - Inventory: Namespace and ConfigMap<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=7d3107fb-c0fe-43cb-9729-cf1674e5d1af"> (open in playground)</a></figcaption>
           </figure>
<div id="embedded-design-d0987b9a-b20e-4bc1-b47c-69ca3078d380" style="height:30rem;width:100%;"></div>
<script src="/assets/img/meshmodel/relationships/embedded-design-hierarchical-parent-wallet-relationship.js" type="module"></script>
</details>

<h3 id="6-hierarchical---parent---inventory">6. Hierarchical - Parent - Inventory</h3>

<p><strong>Example</strong>:</p>

<ul>
  <li>Example 1) Any namespaced Kubernetes component –&gt; Kubernetes Namespace</li>
</ul>

<details close=""><summary>Visual Representation of Hierarchical-Parent Relationship</summary>
           <figure><br /><figcaption>1. Hierarchical - Parent: Namespace (Parent) and ConfigMap (child), Role (Child) <a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=ccf38fba-6ada-4332-8ee7-033ee2c21f91"> (open in playground)</a></figcaption>
           </figure>
<div id="embedded-design-ccf38fba-6ada-4332-8ee7-033ee2c21f91" style="height:30rem;width:100%;"></div>
<script src="/assets/img/meshmodel/relationships/embedded-design-hierarchical-parent-inventory-relationship.js" type="module"></script>
</details>

<h3 id="7-match---labels-tagsets">7. Match - Labels (Tagsets)</h3>

<p>This relationship type defines the associations between components based on shared Labels or Annotations.</p>

<p><strong>Example</strong>: An label-based tag-set relationship between a NodePort service and an application.</p>

<details close=""><summary>Visual Representation of Tag-Sets Relationship</summary>
          <br />
          <figure><figcaption>Tag-Set: Service and Deployment that share the same label<a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=2d0a36b9-8170-4076-8aea-4fa6b28caf31"> (open in playground)</a></figcaption>
          <img alt="Edge - Firewall" src="/assets/img/meshmodel/relationships/tagset_relationship.svg" />
          </figure>        
</details>

<h3 id="8-edge---annotation">8. Edge - Annotation</h3>

<p>This relationship depicts connections between components without conveying specific semantic meaning.</p>

<p><strong>Example</strong>: Demonstration of connections between AWS components.</p>

<details close=""><summary>Visual Representation of Edge - Annotation Relationship</summary>
           <figure><br /><figcaption>Edge - Annotation: Relationship between AWS components <a target="_blank" href="https://playground.meshery.io/extension/meshmap?mode=design&amp;design=daecd14f-6c65-45d9-b74a-4fc536a7868f"> (open in playground)</a></figcaption>
           </figure>
<div id="embedded-design-daecd14f-6c65-45d9-b74a-4fc536a7868f" style="height:30rem;width:100%;"></div>
<script src="/assets/img/meshmodel/relationships/embedded-design-edge-annotation-relationship.js" type="module"></script>
</details>

<h2 id="selectors-in-relationships">Selectors in Relationships</h2>

<p>In Meshery, a selector is a way to specify which set of components a certain other component should affect or interact with. Selectors provide a flexible and powerful way to manage and orchestrate resources within a under Meshery’s management.</p>

<p>Selectors can be applied to various components, enabling a wide range of relationship definitions. Here are some examples:</p>

<table class="table table-dark table-active">
    <tr>
        <th>Model Component</th>
        <th>Relationship Kind</th>
        <th>Relationship SubType</th>
        <th>Model Component</th>
    </tr>
    <tr>
        <td>Kubernetes ConfigMap</td>
        <td>Hierarchical</td>
        <td>Inventory</td>
        <td>Kubernetes Pod</td>
    </tr>
    <tr>
        <td>Kubernetes ConfigMap</td>
        <td>Hierarchical</td>
        <td>Inventory</td>
        <td>Kubernetes Deployment</td>
    </tr>
    <tr>
        <td>Meshery WASMFilter</td>
        <td>Hierarchical</td>
        <td>Inventory</td>
        <td>Istio EnvoyFilter</td>
    </tr>
</table>

<p>The above relationships pairs have hierarchical inventory relationships, and visual paradigm remain consistent across different components. A snippet of the selector backing this relationship is listed below.</p>
<details>
<summary>Example Relationship Selector</summary>
<code><pre>
"selector": {
    "allow": {
        "from": [
          {
            "kind": "ConfigMap",
            "model": "kubernetes",
            "patch": {
              "patchStrategy": "replace",
              "mutatorRef": [
                [
                  "name"
                ]
              ],
              "description": "In Kubernetes, ConfigMaps are a versatile resource that can be referenced by various other resources to provide configuration data to applications or other Kubnernetes resources.\n\nBy referencing ConfigMaps in these various contexts, you can centralize and manage configuration data more efficiently, allowing for easier updates, versioning, and maintenance of configurations in a Kubernetes environment."
            }
          }
        ],
        "to": [
          {
            "kind": "Pod",
            "model": "kubernetes",
            "patch": {
              "patchStrategy": "replace",
              "mutatedRef": [
                [
                  "settings",
                  "spec",
                  "containers",
                  "_",
                  "envFrom",
                  "0",
                  "configMapRef",
                  "name"
                ]
              ],
              "description": "ConfigMaps can be referenced in the Pod specification to inject configuration data into the Pod's environment.\n\nThe keys from the ConfigMap will be exposed as environment variables to the container within the Pod."
            }
          }
        ]
    }
}
</pre></code>

</details>

<p>The above snippet defines a selector configuration for allowing relationships between <code class="language-plaintext highlighter-rouge">Kubernetes ConfigMap</code> and <code class="language-plaintext highlighter-rouge">Kubernetes Pod</code>.</p>

<p><!-- add images --></p>

<h2 id="relationship-evaluation">Relationship Evaluation</h2>

<p>Meshery employs a policy-driven approach to evaluate relationships between components. This evaluation helps in:</p>

<ul>
  <li>Determining compatible components for establishing relationships</li>
  <li>Suggesting potential relationships based on the current design</li>
  <li>Validating existing relationships and identifying potential conflicts</li>
  <li>Automating the configuration of components based on established relationships</li>
</ul>

<p><img src="/assets/img/concepts/logical/relationship-evaluation-flow.svg" alt="Meshery Relationship" /></p>

<h3 id="how-relationships-are-formed">How Relationships are formed?</h3>

<ol>
  <li>
    <p>You can create relationships manually by using the edge handles, bringing related components to close proximity or dragging a component inside other component. It may happen that, you created a relationship from the UI, but the <a href="/concepts/logical/policies">Policy Engine</a> rejected or overrode the decision if all the constraints for a particular relationship are not satisfied.</p>
  </li>
  <li>
    <p>Relationships are automatically created when a component’s configuration is modified in a way that relationship criteria is satisfied.</p>
  </li>
</ol>

<div class="alert alert-info">
<h4 class="alert-heading">Explore an example relationship</h4>
To explore an example of this behavior, see the <a href="https://meshery.io/catalog/deployment/example-edge-permission-relationship-7dd39d30-7b14-4f9f-a66c-06ba3e5000fa.html">Example Edge-Permission Relationship</a> and follow the steps written in its description.
</div>

<p>When the relationships are created by the user, almost in all cases the config of the involved components are patched. To see the specific of patching refer <a href="#patch-strategies">Patch Strategies</a>.</p>

<p>Designs are evaluated by the <a href="/concepts/logical/policies">Policy Engine</a> for potential relationships.</p>

<!-- Explain how and what configs get patched when relationships are created -->
<!-- Explain real time evaluationof relationships on -->
<!-- 1. Import -->
<!-- 2. When compoennt config is update and it statisfied the condition for the relationship -->

<h3 id="patch-strategies">Patch Strategies</h3>

<p>Patches in Meshery relationships utilize strategies and references (mutatorRef/mutatedRef) for the from and to fields. These convey the property path that will be updated as the relationship is created.</p>

<h3 id="caveats-and-considerations">Caveats and Considerations</h3>

<ol>
  <li>If the user creates a <code class="language-plaintext highlighter-rouge">Hierarchical Inventory</code> relationship between <code class="language-plaintext highlighter-rouge">Pod</code>, <code class="language-plaintext highlighter-rouge">Job</code>, and any other high-level Kubernetes resources like <code class="language-plaintext highlighter-rouge">Deployment</code>, <code class="language-plaintext highlighter-rouge">StatefulSet</code>, or <code class="language-plaintext highlighter-rouge">CronJobs</code>, after the relationship has been established unfortunately, there’s no system to remove the extra pod configuration automatically.
If the design is not configured with <code class="language-plaintext highlighter-rouge">labels</code> <code class="language-plaintext highlighter-rouge">selectors</code> and <code class="language-plaintext highlighter-rouge">replicas</code> appropriately, there’s a possibility of additional resources getting provisioned when deployed. eg: The relationship between a Pod and deployment can result in 2 Pods (1 pod coming as part of deployment resource) and 1 Deployment.  It’s important to be aware of this possibility and manage configurations carefully to avoid unexpected issues during deployment</li>
</ol>

<h1 id="itemizing-your-relationship-definitions-in-your-meshery-deployment">Itemizing your Relationship Definitions in your Meshery deployment</h1>

<p>In any given Meshery deployment, you can reference and search the full set of registered relationships (in Meshery’s internal registry) in using either of Meshery’s client interfaces.</p>

<p><strong>Meshery UI</strong></p>

<ul>
  <li>Visit <em>Setttings</em> –&gt; <em>Registry</em></li>
</ul>

<p><strong>Meshery CLI</strong></p>

<ul>
  <li>Run <code class="language-plaintext highlighter-rouge">mesheryctl relationship list</code></li>
</ul>

<!--
```
mesheryctl model import -f [ oci:// | file:// ]`
``` -->
   
           
          <br/>


        </div>
      </main>
      
      <div class="content-table-wrapper">
        <div class="content-table">
          <div class="content-table__editable"><strong>Tools</strong>
<a href="https://github.com/meshery/meshery/issues/new?assignees=&labels=area%2Fdocs%2C+framework%2Fjekyll&template=documentation.md&title=%5BDocs%5D" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i> Create doc issue</a>
<a href="https://github.com/meshery/meshery/blob/master/docs/pages/concepts/logical/relationships.md" rel="noopener" target="_blank"><i class="fa fa-edit fa-fw"></i> Edit this page</a>
<a href="https://github.com/meshery/meshery/new/master/docs/pages/concepts/logical/relationships.md?filename=change-me.md&value=---%0Atitle%3A+%22Long+Page+Title%22%0AlinkTitle%3A+%22Short+Nav+Title%22%0Aweight%3A+100%0Adescription%3A+%3E-%0A+++++Page+description+for+heading+and+indexes.%0A---%0A%0A%23%23+Heading%0A%0AEdit+this+template+to+create+your+new+page.%0A%0A%2A+Give+it+a+good+name%2C+ending+in+%60.md%60+-+e.g.+%60getting-started.md%60%0A%2A+Edit+the+%22front+matter%22+section+at+the+top+of+the+page+%28weight+controls+how+its+ordered+amongst+other+pages+in+the+same+directory%3B+lowest+number+first%29.%0A%2A+Add+a+good+commit+message+at+the+bottom+of+the+page+%28%3C80+characters%3B+use+the+extended+description+field+for+more+detail%29.%0A%2A+Create+a+new+branch+so+you+can+preview+your+new+file+and+request+a+review+via+Pull+Request.%0A" rel="noopener" target="_blank"><i class="fa fa-plus fa-fw"></i> Create new page</a>


<!-- this will parse through the header fields and add a button to open
     an issue / ask a question on Github. The editable field should be in
     the post frontend matter, and refer to the label to open the issue for -->
     
</div>
          <nav id="TableOfContents">
            <strong>Contents</strong>
            <ul>
              <li>
                <ul id="TOC">
                  <!-- Links will be appended here-->
                </ul>
              </li>
            </ul>
          </nav>
        </div>
      </div>
      
    </div>
    <footer class="footer">
  <!-- meshery-custom-begin"
      <div class="col-6 col-sm-4 text-xs-center order-sm-2">

<ul class="list-inline mb-0">
  <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="" aria-label="Twitter" data-original-title="Twitter">
    <a class="text-white" target="_blank" href="https://twitter.com/https://twitter.com/mesheryio">
      <i class="fab fa-twitter"></i>
    </a>
  </li>
</ul>
</div>
<div class="col-6 col-sm-4 text-right text-xs-center order-sm-3">
<ul class="list-inline mb-0">
  <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="" aria-label="GitHub" data-original-title="GitHub">
    <a class="text-white" target="_blank" href="https://github.com/meshery/meshery">
      <i class="fab fa-github"></i>
    </a>
  </li>
</ul>
meshery-custom-end -->
  <div class="text-white">&copy; 2025 The Meshery Authors</div>
  

  <!-- meshery-custom-begin -->

  <div class="footer-icons-list">
    <div class="footer-icons">
      <a class="social__link social__link--forum" href="http://discuss.meshery.io" target="_blank" rel="noreferrer">
        <img
          src=""
          alt="forum"
        />
        <span class="footer-icons-text">Community discussion forum</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link social__link--mail" href="https://meshery.io/subscribe" target="_blank" rel="noreferrer">
        <img
          src=""
          alt="mail"
        />
        <span class="footer-icons-text">Get connected with the community</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link social__link--slack" href=" https://slack.meshery.io/" target="_blank" rel="noreferrer">
        <img
          class="slack"
          src=""
          alt="slack"
        />
        <span class="footer-icons-text">Join the Meshery Slack</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://meshery.io/calendar">
        <svg fill="#666666" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
          <path
            d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"
          />
          <g stroke-linecap="undefined" stroke-linejoin="undefined">
            <path d="M-3.468 8.168h-.033m25.313-4.242l-.063-.254M7.858 4.814v9.387" />
            <path d="M1.833 9.507h12.051" />
          </g>
        </svg>
        <span class="footer-icons-text">Subscribe to the community calendar</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://twitter.com/mesheryio" target="_blank" rel="noreferrer">
       <svg alt="twitter" class="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1" height="1.8em"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="#666666"></path></svg>
       <span class="footer-icons-text">Follow on Twitter</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://github.com/meshery" target="_blank" rel="noreferrer">
        <img
          class="github"
          src=""
          alt="github"
        />
        <span class="footer-icons-text">Contribute on GitHub</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://www.linkedin.com/showcase/meshery/" target="_blank" rel="noreferrer">
        <img
          class="linkedin"
          src=""
          alt="linkedin"
        />
        <span class="footer-icons-text">Connect on LinkedIn</span>
      </a>
    </div>

    <div class="footer-icons">
      <a
        class="social__link"
        href="https://www.youtube.com/mesheryio?sub_confirmation=1"
        target="_blank"
        rel="noreferrer"
      >
        <img
          class="youtube"
          src=""
          alt="youtube"
        />
        <span class="footer-icons-text">Watch community meeting recordings</span>
      </a>
    </div>

    <div class="footer-icons">
      <a class="social__link" href="https://hub.docker.com/u/meshery/" target="_blank" rel="noreferrer">
        <img
          class="docker"
          src=""
          alt="docker"
        />
        <span class="footer-icons-text">Access Docker images</span>
      </a>
    </div>
  </div>
  <!-- meshery-custom-end -->
</footer>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>

<script type="text/javascript" src="/assets/js/lightbox.js"></script>
<link rel="stylesheet" href="/assets/css/lightbox.css" />
<script type="module" src="https://md-block.verou.me/md-block.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/navbar.js"></script>

 <script async src='https://www.google-analytics.com/analytics.js'></script>
<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
	ga('create', 'UA-00000000-0', 'auto');
	ga('send', 'pageview');
}
</script>

  </body>
</html>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script>
$(document).ready(function() {

    var toc = $('#TOC');

    // Select each header
    sections = $('.td-content h1');
        $.each(sections, function(idx, v) {
            section = $(v);
            var div_id = $(section).attr('id');
            if(!section.hasClass('noTOC')){
               var div_text = section.text().split('¶')[0];
              var parent = $("#" + div_id)
              var content = '<li id="link_' + div_id + '" class="md-nav__item"><a class="md-nav__link" href="#' + div_id + '" title="' + div_text +'">' + div_text +'</a>asdf</li>';
              $(document).find(toc).append(content);
            }

            // Add section code to subnavigation
            var children = $('<nav class="md-nav"><ul class="md-nav__list"></nav></ul>')
            var contenders = $("#" + div_id).nextUntil("h1");
            $.each(contenders, function(idx, contender){
               if( !$(contender).hasClass("noTOC") && ($(contender).is('h2') || $(contender).is('h3')) ) {
                   var contender_id = $(contender).attr('id');
                   var contender_text = $(contender).text().split('¶')[0];
                   var content = '<li class="md-nav__item"><a class="md-nav__link" href="#' + contender_id + '" title="' + contender_text +'">' + contender_text +'</a></li>';
                   children.append(content);
                }
             })
             $("#link_" + div_id).append(children);
        });
        //added 'selected' tag to the first element of toc
        $('.md-nav__link').first().addClass('selected');

        $(window).scroll(function(e){
          // Detect how far are we from the top of the page
          let windowTop = $(this).scrollTop();
          // Loop through every navigation menu item
          $('.md-nav__link').each(function (event) {       
              if (windowTop >= $($(this).attr('href')).offset().top - 100) {
              // Remove 'selected' from previously highlighted menu items
              $('.selected').removeClass('selected');
              // Highlight the current menu item by adding 'selected' class
              $(this).addClass('selected');
          }
          if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            $('.selected').removeClass('selected');
              $(this).addClass('selected');
          }
        });
      })
      // Smooth scroll to target section when clicking on TOC link
      $('a[href^="#"]').on('click', function(event) {
        event.preventDefault();
        var target = $(this.hash);
        if (target.length) {
          $('html, body').animate({
          scrollTop: target.offset().top - 70
          }, 1000);
        }
      });
    });
</script>

